import {Upload, Icon, Modal, message, Button} from 'antd';
import React, {Component} from 'react';
import { config } from "../config";
import PropTypes from 'prop-types';
import app from "../app";
class FilesWall extends Component {
    state = {
        previewVisible: false,  //是否显示预览的图片
        previewImage: '',  //预览图片的地址
        fileList: this.props.fileList || [], //已经上传的文件列表（受控）
        parameter:{},  //传给服务器的参数
        fileLength:this.props.size, //一共显示多少张图片
        multiple:this.props.multiple,  //是否支持多选
        isOccur:2
    };

    // 上传文件之前 判断是否为图片类型
    beforeUpload=(file)=>{
        const isJPG = file.type === 'image/jpg';
        if (!isJPG) {
            this.setState({
                isOccur:1
            });
            message.error('注意上传的文件格式（只能上传xlsx的文件）!');
        }

        else{
            this.setState({
                isOccur:2
            })
        }
    }

    // 删除图片
    handleRemove = (file) => {

    };

    // 关闭预览的弹出框
    handleCancel = () =>{
        this.setState({previewVisible: false})
    }

    // 点击文件链接或预览图标时的回调  即放大图片观看
    handlePreview = (file) => {
        console.log(file)
        this.setState({
            previewImage: file.url || file.thumbUrl,  //传给Modal框中图片地址H
            previewVisible: true,
        });
    };

    // 上传中、完成、失败都会调用这个函数。
    handleChange = ({fileList}) => {
      if(this.state.isOccur==2){
          this.setState({fileList});
          let file = [];

          // 服务器返回的数据
          fileList.forEach((item) => {
              if (item.response) {
                  if (item.response.code == 1) {
                      file.push(item.response.data);
                  }
              }
          });

          this.props.fileUpdate(file,  fileList);
      }
    };

    render() {
        const {previewVisible, previewImage} = this.state;
        const { fileList} = this.props;
        const uploadButton = (
            <Button>
                <Icon type="upload" /> 上传
            </Button>
        );
        return (
            <div className="clearfix" >
                <Upload
                     action={config.fileUrl + '/api/admin/file/upload'}  //必选参数, 上传的地址
                    //listType="picture-card" //上传列表的内建样式，支持两种基本样式 text or picture
                    fileList={fileList} //已经上传的文件列表（受控）
                    data={this.state.parameter}  //上传所需参数或返回上传参数的方法
                   onPreview={this.handlePreview}  //点击文件链接或预览图标时的回调
                     onRemove={this.handleRemove}
                    onChange={this.handleChange} //上传文件改变时的状态 上传中、完成、失败都会调用这个函数。
                   //  beforeUpload={this.beforeUpload} //上传文件之前的钩子，参数为上传的文件
                    multiple={this.state.multiple}  //是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
                >
                    {this.props.fileList.length >= this.state.fileLength ? null : uploadButton}
                </Upload>

                {/*预览图片的弹出框*/}
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>
        );
    }

    componentDidMount() {
    }
}
FilesWall.propTypes = {
    fileUpdate: PropTypes.func,
    file: PropTypes.array,
    removePicture: PropTypes.func,
};

export {FilesWall};